<template>
  <div class="common-wrap">
    <el-row :gutter="10" style="margin:0;padding:10px 0">
      <el-col :span="6">
        <WebsiteTree
          :tree-cus-data="treeData"
          @handle-node-click="handleNodeClick"
        />
      </el-col>
      <el-col :span="18">
        <QueryForm
          ref="conditionForm"
          module="expenseItem"
          v-model:searchForm="searchForm"
          v-model:search-column="searchColumn"
          :searchBtnLoading="searchBtnLoading"
          @handle-search="handleSearch"
        />
        <div class="common-box">
          <MyTable
            ref="commonTable"
            tableId="provinceCityArea"
            :data-source="dataSource"
            :loading="tableLoading"
            :page-vo="pageVo"
            :columns="columns"
            moduleName="provinceCityArea"
            @handle-selection-change="handleSelectionChange"
            @handle-page-change="handlePageChange"
            :maxHeight="700"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="tsx" setup>
import { ref, reactive, onMounted,computed } from "vue";
import i18n from "@/lang/index";
import * as api from "@/api/index";
const tableLoading = ref(false);
const addVisible = ref(false);
const editVisible = ref(false);
const dataSource = ref([]);
const treeData = ref([]);
const multipleSelection = ref([]);
const loading = ref(false);
let searchForm = reactive({});
let editRow = reactive({});
const searchBtnLoading = ref(false);
let currentRow = reactive({
  countryCode: "",
  countryName: "",
});
let pageVo = reactive({
  total: 0,
  pageSize: 50,
  currentPage: 1,
});
const searchColumn = ref([
  {
    type: "label_input",
    label: "省份名称",
    prop: "provinceName",
  },
  {
    type: "label_input",
    label: "城市名称",
    prop: "cityName",
  },
  {
    type: "label_input",
    label: "区/县名称",
    prop: "areaName",
  },
]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "areaCode",
    title: "行政编码",
  },
  {
    field: "provinceName",
    title: "省份名称",
  },
  {
    field: "cityName",
    title: "城市名称",
  },
  {
    field: "areaName",
    title: "区/县名称",
  },
]);
async function getTableList() {
  const { currentPage, pageSize } = pageVo;
  tableLoading.value = true;
  searchBtnLoading.value = false;
  try {
    const { rows, total } = await api.default.system.provinceCityArea.areaList({
      ...searchForm,
      countryCode: currentRow.countryCode,
      pageNum: currentPage,
      pageSize: pageSize,
    });
    dataSource.value = rows;
    pageVo.total = total;
  } finally {
    tableLoading.value = false;
    searchBtnLoading.value = false;
  }
}
function handleNodeClick(val: any) {
  currentRow = { ...val };
  handleSearch();
}
function handleSelectionChange(val) {
  multipleSelection.value = val;
}
function handlePageChange(val) {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  getTableList();
}
function handleSearch() {
  pageVo.currentPage = 1;
  getTableList();
}
// 获取主类（树形）列表
async function getCountryList() {
  loading.value = true;
  try {
    const res = await api.default.system.provinceCityArea.countryList({
      pageSize: 300,
      enableFlag: "1",
    });
    treeData.value = res.rows.map((item) => ({
      ...item,
      label: item.countryName,
    }));
    currentRow = {...treeData.value[0]};
    getTableList();
  } finally {
    loading.value = false;
  }
}
onMounted(() => {
  getCountryList();
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
}

.left-tree {
  position: relative;
  float: left;
}

.right-table {
  float: right;
}

.dragLine {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: 100;
  width: 10px;
  height: 100%;
  cursor: col-resize;
}
</style>
